<template>
	<view class="page">
		<view style="line-height:60rpx;color:#999;margin:0 40rpx;">
			订单编号：{{orderInfo.taskNumber||''}}</view>
		<view style="background-color: #fff;padding:30rpx;">
			<view style="display: flex;justify-content:space-between;">
				<view style="margin-right:20rpx;">
					<image mode="aspectFill" style="height:100rpx;width:100rpx;border-radius:15rpx;"
						:src="orderInfo.taskTypeImg"></image>
				</view>
				<view style="flex-grow:1;">
					<view style="margin-bottom: 10rpx;">
						<text style="font-size:40rpx;margin-right:10rpx;">{{orderInfo.taskTypeName||''}}</text>
						<text> /{{orderInfo.parentTypeName||''}}</text>
					</view>
					<text style="color:#999;" v-if="!!orderInfo.startDate">{{orderInfo.startDate|dateFormat}}
						<text style="padding:0 10rpx;">~</text>
						<text style="color:#999;" v-if="!!orderInfo.endDate"> {{orderInfo.endDate|dateFormat}}</text>
						<text style="color:#999;" v-if="!orderInfo.endDate">未完工</text>
					</text>
				</view>
				<text style="font-size:24rpx;"
					:style="{color:taskStateStyle(orderInfo)}">{{orderInfo|taskStateName}}</text>
			</view>
			<u-row style="line-height:60rpx;">
				<u-col :span="4">
					<text style="color:#999;">预算</text><br /><text
						style="font-size:35rpx;">{{orderInfo.budget||''}}元</text>
				</u-col>
				<u-col :span="4">
					<text style="color:#999;">工期</text><br /><text
						style="font-size:35rpx;">{{orderInfo.duration||''}}天</text>
				</u-col>
				<u-col :span="4">
					<text style="color:#999;">订单总价</text><br /><text
						style="font-size:35rpx;">{{orderInfo.price||''}}元</text>
				</u-col>
			</u-row>
			<view
				style="margin:30rpx 0;letter-spacing:2rpx;font-size:30rpx;color:#484f68;display:flex;align-items:center;">
				<u-icon size="40" name="map"></u-icon><text>{{orderInfo.taskAddress||''}}</text>
			</view>
			<view style="line-height: 40rpx;color:#999;">{{orderInfo.introduction||'该订单无特殊招工要求'}}</view>
			<view style="height:20rpx;"></view>
			<u-row>
				<u-col :span="4" v-for="item in taskPicture">
					<image style="width:100%;height:200rpx;border-radius:15rpx;" :src="item" mode="aspectFill">
					</image>
				</u-col>
			</u-row>
		</view>
		<view>
			<view style="line-height:60rpx;color:#999;margin:0 40rpx;">施工师傅</view>
			<view style="background-color:#fff;padding:30rpx;">
				<view style="display: flex;justify-content:space-between;">
					<view style="margin-right:20rpx;">
						<image mode="aspectFill" style="height:100rpx;width:100rpx;border-radius:15rpx;"
							:src="executorInfo.headIcon"></image>
					</view>
					<view style="flex-grow:1;">
						<view style="margin-bottom: 10rpx;">
							<text style="font-size:40rpx;margin-right:10rpx;">{{executorInfo.gongName}}</text>
						</view>
						<text style="color:#999;">
							{{executorInfo.gongRoleName}} | {{executorInfo.gongWorkingYears}}年经验</text>
					</view>
				</view>
				<view style="height:20rpx;"> </view>
				<view style="color:#333;line-height:46rpx;font-size:27rpx;letter-spacing:2rpx;">
					<view>联系方式：{{executorInfo.mobile}}</view>
					<view>联系地址：{{executorInfo.gongAddress}}</view>
					<view>工信分：{{executorInfo.gongxin}}</view>
					<view>个人介绍：{{executorInfo.gongDescription}}</view>
					<view></view>
				</view>
				<u-line margin="30rpx 0" color="#999" />

				<text v-if="orderInfo">完工图片</text>
				<view style="height:20rpx;"></view>
				<u-row>
					<u-col :span="4" v-for="item in resultPicture">
						<image style="width:100%;height:200rpx;border-radius:15rpx;" :src="item" mode="aspectFill">
						</image>
					</u-col>
				</u-row>
			</view>
		</view>
		<view>
			<view style="line-height:60rpx;color:#999;margin:0 40rpx;">评价</view>
			<view style="background-color:#fff;padding:30rpx;">
				<view>
					<text>分数：</text>
					<u-rate :count="5" v-model="orderInfo.score" active-color="#ff9b06"></u-rate>
				</view>
				<view style="margin:20rpx 0;line-height: 40rpx;color:#999;">
					{{orderInfo.scoringContent}}
				</view>
				<u-row>
					<u-col :span="4" v-for="item in scoringPicture">
						<image style="width:100%;height:200rpx;border-radius:15rpx;" :src="item" mode="aspectFill">
						</image>
					</u-col>
				</u-row>
			</view>
		</view>
		<view style="height:70px;"></view>
		<view
			style="position:fixed;bottom:0;width:100%;height:50px;display:flex;line-height:50px;text-align: center;border-top: 1rpx solid #dadada;background-color: #fff;">
			<view style="padding: 0 30rpx;" @click="toChart(orderInfo)">
				<u-icon name="kefu-ermai" size="30"></u-icon>客服
			</view>
			<view style="padding: 0 30rpx;" @click="!shoucang(orderInfo)?addShou(orderInfo):deleteShou(orderInfo)">
				<u-icon :color="!shoucang(orderInfo)?'':'#ff9900'" :name="!shoucang(orderInfo)?'star':'star-fill'"
					size="30">
				</u-icon>收藏
			</view>
			<view style="padding: 0 30rpx;">
				<u-icon name="zhuanfa" size="30"></u-icon>
				<u-button :custom-style="customStyle" open-type="share" size="mini" :hair-line="false">分享</u-button>
			</view>
			<view style="color:#fff;flex-grow:1;display:flex;" v-if="userId==orderInfo.createUserId">
				<view v-if="orderInfo.taskState==2" style="background-color:#ff9900;flex-grow:1;" @click="quxiao()">
					取消订单</view>
				<view v-if="orderInfo.taskState==1||orderInfo.taskState==2"
					style="background-color:#fa3534;flex-grow:1;" @click="chedan()">撤 单</view>
				<view v-if="orderInfo.taskState==7" style="background-color:#fab6b6;flex-grow:1;">已撤单</view>
				<view v-if="orderInfo.taskState==4" style="background-color:#fa3534;flex-grow:1;"
					@click="fukuan(orderInfo)">付
					款</view>
				<view v-if="orderInfo.taskState==4" style="background-color:#ff9b06;flex-grow:1;"
					@click="xianxai(orderInfo)">线下付款</view>
				<view v-if="orderInfo.taskState==5" style="background-color:#2979ff;flex-grow:1;" @click="pingjia()">评
					价</view>
				<view v-if="orderInfo.taskState<4" style="background-color:#2979ff;flex-grow:1;"
					@click="priceShow=true">改总价
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<u-modal v-model="priceShow" title="调整订单总价" :show-cancel-button="true" :title-style="{padding:'20rpx 0'}"
			@confirm="updatePrice()" @cancel="getProductById()" width="400">
			<view style="margin:0 40rpx 20rpx 40rpx;">
				<u-input v-model="orderInfo.price" type="number" maxlength="6" :border="true" />
			</view>
		</u-modal>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				customStyle: {
					border: 0,
					color: '#222',
					fontSize: '26rpx',
					padding: 0,

				},
				priceShow: false,
				orderId: "",
				orderInfo: {},
				taskPicture: [],
				resultPicture: [],
				scoringPicture: [],
				executorInfo: {},
				rateValue: 2,
				collectionData: [],
				userId: ""
			}
		},
		onLoad(data) {
			this.orderId = data.id
			// this.getCollectionAll()
		},
		methods: {
			getCollectionAll() {
				this.$u.api.getCollectionAll({
					createUserId: uni.getStorageSync('user').id
				}).then(res => {
					this.collectionData = res.items
				})
			},
			getProductById() {
				this.$u.api.getProductById({
					id: this.orderId
				}).then(res => {
					this.orderInfo = res
					if (!!this.orderInfo.taskPicture) {
						this.taskPicture = this.orderInfo.taskPicture.split(',')
					}
					if (!!this.orderInfo.resultPicture) {
						this.resultPicture = this.orderInfo.resultPicture.split(',')
					}
					if (!!this.orderInfo.scoringPicture) {
						this.scoringPicture = this.orderInfo.scoringPicture.split(',')
					}
					// 已接单
					if (!!this.orderInfo.executorId) {
						this.$u.api.getUserById({
							id: this.orderInfo.executorId
						}).then(res1 => {
							this.executorInfo = res1.item
						})
					}
				})
			},
			// 取消订单
			quxiao() {
				uni.showModal({
					content: '您是否要取消订单',
					success: res1 => {
						if (res1.confirm) {
							let param = {
								id: this.orderInfo.id,
								taskState: 1,
								executorId: 'clear'
							}
							this.$u.api.productUpdate(param).then(res => {
								if (res.code == 200) {
									this.$refs.uToast.show({
										title: '取消订单成功',
										type: 'success'
									})
									setTimeout(function() {
										this.$u.api.smsQuxiao({
											phoneNumber: this.userInfo.gongMobile
										});
										this.$u.api.smsQuxiao({
											phoneNumber: this.orderInfo.mobile
										});
										uni.navigateBack()
									}, 1200);

								}
							})
						} else if (res1.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 撤单
			chedan() {
				let param = {
					id: this.orderInfo.id,
					taskState: 7,
				}
				this.$u.api.productUpdate(param).then(res => {
					if (res.code == 200) {
						this.$refs.uToast.show({
							title: '撤单成功',
							type: 'success'
						})
						uni.navigateBack()
					}
				})
			},
			// 付款
			fukuan(val) {
				let openId = uni.getStorageSync('login').weChatKey
				if (!!openId) {
					let that = this
					this.$u.api.wxPay({
						openId: openId
					}).then(res => {
						let a = res.item
						uni.requestPayment({
							provider: 'wxpay',
							'timeStamp': a.timeStamp,
							'nonceStr': a.nonceStr,
							'package': a.package,
							'signType': 'MD5',
							'paySign': a.paySign,
							success: res1 => {
								that.$u.api.productUpdate({
									id: that.orderInfo.id,
									taskState: 5,
								}).then(res2 => {
									if (res.code == 200) {
										that.$u.api.transactionAdd({
											amount: val.price,
											income: uni.getStorageSync('user').id,
											expenditure: val.executorId,
											transactionType: "1",
											year: new Date().getFullYear(),
											month: new Date().getMonth() + 1,
											day: new Date().getDate()
										}).then(res => {})
										this.$u.api.engineeringUpdate({
											id: val.executorId,
											money: val.price,
											type: 2
										}).then(res4 => {})
										this.$u.api.commissionUpdate({
											id: val.executorId,
											money: val.price,
											type: 1
										}).then(res2 => {})
										this.$refs.uToast.show({
											title: '订单已支付成功',
											type: 'success'
										})
										this.getProductById()
									}
								})
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						});
					})
				} else {
					this.$refs.uToast.show({
						title: '未绑定微信，无法执行支付',
						type: 'error'
					})
				}
			},
			// 线下付款
			xianxai(val) {
				let that = this
				that.$u.api.productUpdate({
					id: this.orderInfo.id,
					taskState: 5,
				}).then(res => {
					if (res.code == 200) {
						this.$u.api.transactionAdd({
							amount: val.price,
							income: val.executorId, // 收入方
							expenditure: uni.getStorageSync('user').id, // 支出方
							year: new Date().getFullYear(),
							month: new Date().getMonth() + 1,
							day: new Date().getDate()
						}).then(res1 => {})
						this.$u.api.engineeringUpdate({
							id: val.executorId,
							money: val.price,
							type: 2
						}).then(res4 => {})
						this.$u.api.commissionUpdate({
							id: val.executorId,
							money: val.price,
							type: 1
						}).then(res2 => {})
						this.$refs.uToast.show({
							title: '订单已支付成功',
							type: 'success'
						})
						this.getProductById()
					}
				})
			},
			// 评价
			pingjia() {
				uni.navigateTo({
					url: '/pages/template1/evaluate?id=' + this.orderInfo.id
				});
			},
			// 变动价格
			updatePrice() {
				let param = {
					id: this.orderInfo.id,
					price: this.orderInfo.price,
				}
				this.$u.api.productUpdate(param).then(res => {
					if (res.code == 200) {
						this.$refs.uToast.show({
							title: '修改成功',
							type: 'success'
						})
					}
				})
			},
			taskStateStyle(val) {
				// 1未接单 2未开工 3进行中 4已完工 5已付款 6已评价 7已作废
				let name = ""
				if (val.auditState == 1) {
					name = "#ff0000"
				} else if (val.auditState == 3) {
					name = "#ff0000"
				} else if (val.taskState == 1) {
					name = "#ff9b06"
				} else if (val.taskState == 2) {
					name = "#ff9b06"
				} else if (val.taskState == 3) {
					name = "#409EFF"
				} else if (val.taskState == 4) {
					name = "#409EFF"
				} else if (val.taskState == 5) {
					name = "#67C23A"
				} else if (val.taskState == 6) {
					name = "#67C23A"
				} else if (val.taskState == 7) {
					name = "#F56C6C"
				}
				return name
			},
			shoucang(val) {
				let name = false
				this.collectionData.forEach(res => {
					if (res.objectId == val.id) {
						name = true
					}
				})
				return name
			},
			addShou(val) {
				let param = {
					objectId: val.id,
				}
				this.$u.api.collectionAdd(param).then(res => {
					this.getCollectionAll()
				})
			},
			deleteShou(val) {
				let id = ""
				this.collectionData.forEach(res => {
					if (res.objectId == val.id) {
						id = res.id
					}
				})
				this.$u.api.collectionDelete({
					id: id
				}).then(res => {
					this.getCollectionAll()
				})
			},
			toChart(val) {
				uni.navigateTo({
					url: '/pages/chat/index'
				});
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '自定义分享标题',
				path: '/pages/template1/orderDetail?id=' + this.orderId
			}
		},
		filters: {
			taskStateName(val) {
				// 1未接单 2未开工 3进行中 4已完工 5已付款 6已评价 7已作废
				let name = ""
				if (val.auditState == 1) {
					name = "待审核"
				} else if (val.auditState == 3) {
					name = "已驳回"
				} else if (val.taskState == 1) {
					name = "未接单"
				} else if (val.taskState == 2) {
					name = "未开工"
				} else if (val.taskState == 3) {
					name = "施工中"
				} else if (val.taskState == 4) {
					name = "已完工"
				} else if (val.taskState == 5) {
					name = "已付款"
				} else if (val.taskState == 6) {
					name = "已评价"
				} else if (val.taskState == 7) {
					name = "已作废"
				}
				return name
			},
			dateFormat(val) {
				let name = ""
				if (!!val) {
					name = val.split(' ')[0]
				}
				return name
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100%;
		background-color: #f8f9fb;
		font-size: 26rpx;
		color: #222;
	}
</style>